<template>
  <section class="m-istyle">
    <dl>
      <dt>有格调</dt>
      <dd
        v-for="(item,index) in tabList"
        :key="index"
        :class="{ active: kind === item.kind }"
        :kind="item.kind"
        :keyword="item.keyword"
        @mouseover="over"
      >
        {{ item.title }}
      </dd>
    </dl>
    <ul class="ibody">
      <li
        v-for="(item,idx) in cur"
        :key="idx"
      >
        <el-card
          :body-style="{ padding: '0px' }"
          shadow="never"
        >
          <a :href="'/products?keyword=' + encodeURIComponent(item.title)">
            <img
              :src="item.img"
              class="image"
            >
          </a>
          <ul class="cbody">
            <li class="title">
              {{ item.title }}
            </li>
            <li class="pos">
              <span>{{ item.pos }}</span>
            </li>
            <li v-if="item.price.length" class="price">
              ￥<em>{{ item.price }}</em><span>/起</span>
            </li>
            <li v-else class="price" style="margin-top:6px;">
              <span>暂无价格</span>
            </li>
          </ul>
        </el-card>
      </li>
    </ul>
  </section>
</template>

<script>
import cookies from 'vue-cookies'
export default {
  data () {
    return {
      kind: 'all',
      list: {
        all: [
          {
            title: '...',
            pos: '...',
            price: '...',
            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591024759734&di=78dd8cdf9de7441ab1123dbdaa755611&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh97%2Fh83%2Fimg_localize_912454092ecdbe33e80aa9bf6f4dc880_560x350.jpg',
            url: 'http://www.lusji.xyz'
          },
          {
            title: '...',
            pos: '...',
            price: '...',
            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591024759734&di=78dd8cdf9de7441ab1123dbdaa755611&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh97%2Fh83%2Fimg_localize_912454092ecdbe33e80aa9bf6f4dc880_560x350.jpg',
            url: 'http://www.lusji.xyz'
          },
          {
            title: '...',
            pos: '...',
            price: '...',
            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591024759734&di=78dd8cdf9de7441ab1123dbdaa755611&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh97%2Fh83%2Fimg_localize_912454092ecdbe33e80aa9bf6f4dc880_560x350.jpg',
            url: 'http://www.lusji.xyz'
          }
        ],
        part: [
          {
            title: '...',
            pos: '...',
            price: '...',
            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591024759734&di=78dd8cdf9de7441ab1123dbdaa755611&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh97%2Fh83%2Fimg_localize_912454092ecdbe33e80aa9bf6f4dc880_560x350.jpg',
            url: 'http://www.lusji.xyz'
          },
          {
            title: '...',
            pos: '...',
            price: '...',
            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591024759734&di=78dd8cdf9de7441ab1123dbdaa755611&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh97%2Fh83%2Fimg_localize_912454092ecdbe33e80aa9bf6f4dc880_560x350.jpg',
            url: 'http://www.lusji.xyz'
          },
          {
            title: '...',
            pos: '...',
            price: '...',
            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591024759734&di=78dd8cdf9de7441ab1123dbdaa755611&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh97%2Fh83%2Fimg_localize_912454092ecdbe33e80aa9bf6f4dc880_560x350.jpg',
            url: 'http://www.lusji.xyz'
          }
        ],
        spa: [
          {
            title: '...',
            pos: '...',
            price: '...',
            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591024759734&di=78dd8cdf9de7441ab1123dbdaa755611&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh97%2Fh83%2Fimg_localize_912454092ecdbe33e80aa9bf6f4dc880_560x350.jpg',
            url: 'http://www.lusji.xyz'
          },
          {
            title: '...',
            pos: '...',
            price: '...',
            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591024759734&di=78dd8cdf9de7441ab1123dbdaa755611&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh97%2Fh83%2Fimg_localize_912454092ecdbe33e80aa9bf6f4dc880_560x350.jpg',
            url: 'http://www.lusji.xyz'
          },
          {
            title: '...',
            pos: '...',
            price: '...',
            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591024759734&di=78dd8cdf9de7441ab1123dbdaa755611&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh97%2Fh83%2Fimg_localize_912454092ecdbe33e80aa9bf6f4dc880_560x350.jpg',
            url: 'http://www.lusji.xyz'
          }
        ],
        movie: [
          {
            title: '...',
            pos: '...',
            price: '...',
            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591024759734&di=78dd8cdf9de7441ab1123dbdaa755611&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh97%2Fh83%2Fimg_localize_912454092ecdbe33e80aa9bf6f4dc880_560x350.jpg',
            url: 'http://www.lusji.xyz'
          },
          {
            title: '...',
            pos: '...',
            price: '...',
            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591024759734&di=78dd8cdf9de7441ab1123dbdaa755611&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh97%2Fh83%2Fimg_localize_912454092ecdbe33e80aa9bf6f4dc880_560x350.jpg',
            url: 'http://www.lusji.xyz'
          },
          {
            title: '...',
            pos: '...',
            price: '...',
            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591024759734&di=78dd8cdf9de7441ab1123dbdaa755611&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh97%2Fh83%2Fimg_localize_912454092ecdbe33e80aa9bf6f4dc880_560x350.jpg',
            url: 'http://www.lusji.xyz'
          }
        ],
        travel: [
          {
            title: '...',
            pos: '...',
            price: '...',
            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591024759734&di=78dd8cdf9de7441ab1123dbdaa755611&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh97%2Fh83%2Fimg_localize_912454092ecdbe33e80aa9bf6f4dc880_560x350.jpg',
            url: 'http://www.lusji.xyz'
          },
          {
            title: '...',
            pos: '...',
            price: '...',
            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591024759734&di=78dd8cdf9de7441ab1123dbdaa755611&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh97%2Fh83%2Fimg_localize_912454092ecdbe33e80aa9bf6f4dc880_560x350.jpg',
            url: 'http://www.lusji.xyz'
          },
          {
            title: '...',
            pos: '...',
            price: '...',
            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591024759734&di=78dd8cdf9de7441ab1123dbdaa755611&imgtype=0&src=http%3A%2F%2Fimages.liqucn.com%2Fimg%2Fh97%2Fh83%2Fimg_localize_912454092ecdbe33e80aa9bf6f4dc880_560x350.jpg',
            url: 'http://www.lusji.xyz'
          }
        ]
      },
      tabList: [
        {
          kind: 'all',
          keyword: '景点',
          title: '全部'
        },
        {
          kind: 'part',
          keyword: '美食',
          title: '约会聚餐'
        },
        {
          kind: 'spa',
          keyword: '丽人',
          title: '丽人SPA'
        },
        {
          kind: 'movie',
          keyword: '电影',
          title: '电影演出'
        },
        {
          kind: 'travel',
          keyword: '旅游',
          title: '品质出游'
        }
      ],
      city: ''
    }
  },
  computed: {
    cur () {
      return this.list[this.kind]
    }
  },
  async mounted () {
    this.city = cookies.get('city') ? cookies.get('city') : this.$store.state.geo.position.city
    const { status, data: { count, pois } } = await this.$axios.get('/search/resultsByKeywords', {
      params: {
        keyword: '景点',
        city: this.city ? this.city : this.$store.state.geo.position.city
      }
    })
    if (status === 200 && count > 0) {
      const r = pois.filter(item => item.photos.length).map((item) => {
        return {
          title: item.name,
          pos: item.type.split(';')[0],
          price: item.biz_ext.cost || '暂无',
          img: item.photos[0].url,
          url: 'http://www.lusji.xyz'
        }
      })
      this.list[this.kind] = r.slice(0, 9)
    } else {
      this.list[this.kind] = []
    }
  },
  methods: {
    async over (e) {
      this.kind = e.target.getAttribute('kind')
      const keyword = e.target.getAttribute('keyword')
      // eslint-disable-next-line no-console
      console.log(keyword)
      const { status, data: { count, pois } } = await this.$axios.get('/search/resultsByKeywords', {
        params: {
          keyword,
          city: this.city
        }
      })
      if (status === 200 && count > 0) {
        const res = pois.filter(item => item.photos.length).map((item) => {
          return {
            title: item.name,
            pos: item.type.split(';')[0],
            price: item.biz_ext.cost || '暂无',
            img: item.photos[0].url,
            url: 'http://www.lusji.xyz'
          }
        })
        this.list[this.kind] = res.slice(0, 9)
        // eslint-disable-next-line no-console
        console.log(res)
      } else {
        this.list[this.kind] = []
      }
    }
  }
}
</script>

<style lang="scss">
@import "@/assets/css/index/artistic.scss";
</style>
